<div class="calendar-box" >
  <div class="cal-table" *ngIf="calendar; else loading" >
    <div class="cal-table-gallery">
      <ul class="cal-table-gallery-overlay">
        <a class="cal-btn cal-btn-prev" href="javascript:;" (click)="previous()"></a>
        <li class="cal-current-year">
          {{  calendar.month | date : 'yyyy' }}
        </li>
        <li>/</li>
        <li class="cal-current-month">
          {{  calendar.month | date : 'MM' }}
        </li>
        <a class="cal-btn cal-btn-next" href="javascript:;" (click)="next()"></a>
      </ul>
    </div>
    <div class="cal-table-box" >
      <ul class="cal-table-box-weekday">
        <li *ngFor="let wday of calendar.weekList; index as i"
            [class.free]="i == 5 || i== 6" [ngClass]="'w_'+i"
            [ngClass]=" active : new Date().getDay() == i+1 "
        >
          {{wday}}
        </li>
      </ul>

      <ul class="cal-table-box-dates" *ngIf="calendar.dateList">
        <li *ngFor="let item of calendar.dateList" >

          <div  class="cal-date-box"
                [ngClass]="{'active': activedDay === item, 'cla-today': item.today, 'cla-cur_month': item.curMonth, 'cla-enable': item.checked}"
                (click)="onSelectDay(item)"
          >
            <p class="cal-past-date abs-pos">{{ item.date | date:'dd' }}</p>

            <ng-template [ngIf]="item.totalCount">
              <!-- <p *ngIf="item.countMap.booked && item.countMap.booked > 0" class="cal-descr booked">
                  {{item.countMap.booked}}节课
              </p> -->
              <p *ngIf="item.totalCount > 0" class="cal-descr abs-pos completed">
                {{item.totalCount < 10 ? '0'+ item.totalCount: item.totalCount }}
                <span i18n="Lessons">Less.</span>
              </p>
              <p *ngIf="item.totalCount > 0" class="dot cal-dot ">•</p>
            </ng-template>

          </div>
        </li>
      </ul>
    </div>
  </div>
  <ng-template #loading>
    <div class="loading"></div>
  </ng-template>
</div>
